const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 插件 提取CSS， 压缩
const path = require('path')
module.exports = {
  mode: 'development', // 开发模式
  devtool: 'cheap-module-eval-source-map', // 调试
  devServer: {
    clientLogLevel: 'warning', // 日历级别
    hot: true, //  HMR
    open: true, // 打开浏览器
    contentBase: [path.join(__dirname, './src')], // 获取静态资源
    publicPath: '/',
    compress: true, // 一切服务都启用gzip 压缩：
    port: 9000
  },
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),  // 输出文件路径， 必须使用绝对路径
    filename: '[name][hash:8].js',  // hash
  },
  module: {
    rules: [
      {
        test: /\.css/,
        use: [
          MiniCssExtractPlugin.loader, // 将CSS提取到CSS文件中
          'css-loader', // 将 css 代码处理为符合 commonjs 规范的代码，处理完成之后的内容是字符串
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  // 下面的代码就好比是将我们当前配置中环境需要用到的 css处理语法加载进来
                  ['postcss-preset-env']
                ]
              }
            }
          }
        ]
      },
      {
        test: /\.js$/, // js 处理（打包、校验、兼容、压缩）
        loader: 'babel-loader',
        exclude: /node_modules/, //node_modules 文件夹下的文件不处理
        options: {
          presets: [ // 预设 只是一个平台， 本身不处理
            [
              '@babel/preset-env', // 这个预设置只帮助我们完成一些基本的兼容 ,
              {
                useBuiltIns: 'usage', // usage 会根据配置的浏览器兼容，以及你代码中用到的 API 来进行 polyfill，实现了按需添加。
                corejs: { version: 3 },
                targets: { // 浏览器版本
                  chrome: '60',
                  firefox: '60', 
                  ie: "9", 
                  safari: '10', 
                  edge: '17'
                }
              }
            ]
          ]
        }
      },
      {
        test: /\.js$/,  // js 处理（校验）
        enforce: 'pre', // loader 先执行
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          fix: true // 解决问题的代码
        }
      },
      { // 处理图片
        test: /\.(png|gif|jpg)$/, // 处理图片
        loader: 'url-loader',
        options: {
          esModule: false,
          limit: 2 * 1024,
          outputPath: 'img'
        }
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      publicPath: './', // 公共路径
    }),
  ]
}